<template>
  <el-form-item label="标签">
    <el-input v-model="currentItem.label" />
  </el-form-item>
  <el-form-item label="宽度">
    <el-input-number v-model="componentStyle.width" :min="1" :max="500" />
  </el-form-item>
  <el-form-item label="是否必填">
    <el-radio-group v-model="elFormItemProps.required">
      <el-radio-button label="true" :value="true" />
      <el-radio-button label="false" :value="false" />
    </el-radio-group>
  </el-form-item>
  <el-form-item label="最大输入长度">
    <el-input v-model="componentProps.maxlength"></el-input>
  </el-form-item>
  <el-form-item label="最小输入长度">
    <el-input v-model="componentProps.minlength"></el-input>
  </el-form-item>
  <el-form-item label="占位符">
    <el-input v-model="componentProps.placeholder"></el-input>
  </el-form-item>
  <el-form-item label="可清除">
    <el-switch v-model="componentProps.clearable" />
  </el-form-item>
  <el-form-item label="类型">
    <el-select
      v-model="componentProps.type"
      placeholder="Select"
      style="width: 240px"
      @change="componentProps.modelValue = null"
    >
      <el-option
        v-for="item in typeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <!--是否显示切换密码图标  -->
  <template v-if="componentProps.type === 'password'">
    <el-form-item label="是否显示切换密码图标">
      <el-switch v-model="componentProps.showPassword" />
    </el-form-item>
  </template>

  <!-- 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 -->
  <template v-if="componentProps.type === 'textarea'">
    <el-form-item label="是否显示统计字数">
      <el-switch v-model="componentProps.showWordLimit" />
    </el-form-item>
    <el-form-item label="输入框行数">
      <el-input-number v-model="componentProps.rows" :min="1" :max="10" />
    </el-form-item>
    <el-form-item label="输入框最小高度">
      <el-input-number v-model="autosize.minRows" :min="1" :max="10" />
    </el-form-item>
    <el-form-item label="输入框最大高度">
      <el-input-number v-model="autosize.maxRows" :min="3" :max="100" />
    </el-form-item>
  </template>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
import { DraggableTreeNode } from "../../../type";
import { InputComponentProps } from "./display-input";
const typeList = [
  { label: "文本", value: "text" },
  { label: "文本域", value: "textarea" },
  { label: "密码", value: "password" },
];
const props = defineProps({
  currentItem: {
    type: Object as PropType<DraggableTreeNode<InputComponentProps, null>>,
    default: () => {
      return {};
    },
  },
});
const elFormItemProps = computed({
  get() {
    return props.currentItem?.component?.elFormItemProps || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.elFormItemProps = value;
    }
  },
});
const componentProps = computed({
  get() {
    return props.currentItem?.component?.componentProps || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.componentProps = value;
    }
  },
});
const componentStyle = computed({
  get() {
    return props.currentItem?.component?.componentStyle || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.componentStyle = value;
    }
  },
});
const autosize = computed({
  get() {
    return props.currentItem?.component?.componentProps?.autosize || {};
  },
  set(value) {
    if (props.currentItem?.component) {
      props.currentItem.component.componentProps.autosize = value;
    }
  },
});
const emit = defineEmits(["update:currentItem"]);
const currentItem = computed({
  get() {
    return (
      props.currentItem || {
        label: "",
        component: {},
      }
    );
  },
  set(value) {
    emit("update:currentItem", value);
  },
});
</script>

<style lang="scss" scoped></style>
